<!-- 文本输入框 -->
<template>
	<div class="text">
		<div class="emoji">
			<div class="mr-[10px] cursor-pointer">
				<svg-icon icon-class="chat-look " size="14px" @click="showEmoji = !showEmoji"></svg-icon>
			</div>
			<el-upload :show-file-list="false" :action="uploadImgUrl" :multiple="false" :on-success="imgUpSuccess" :before-upload="beforeUpload" :headers="headers">
				<div class="mr-[10px]">
					<svg-icon icon-class="chat-image" size="14px"></svg-icon>
				</div>
			</el-upload>
			<div class="mr-[10px] cursor-pointer" @click="$emit('shop')">
				<svg-icon icon-class="chat-link" size="14px"></svg-icon>
			</div>
			<el-upload :show-file-list="false" :action="uploadVideoUrl" :multiple="false" :on-success="imgUpSuccessVideo" :before-upload="beforeUploadVideo" :headers="headers">
				<svg-icon icon-class="chat-video" size="14px"></svg-icon>
			</el-upload>
			<transition name="showbox">
				<div v-show="showEmoji" class="emojiBox">
					<li v-for="(item, index) in emojis" :key="index" @click="content += item">
						<span>{{ item }}</span>
					</li>
				</div>
			</transition>
		</div>
		<textarea ref="text" v-model.trim="content" @keyup="onKeyup" @click="showEmoji = false"></textarea>
		<div class="flex items-center justify-end pr-[15px]">
			<div class="send" @click="send">
				<span>发送</span>
			</div>
		</div>
		<transition name="appear">
			<div v-show="warn" class="warn">
				<div class="description">不能发送空白信息</div>
			</div>
		</transition>
	</div>
</template>

<script>
import emoji from '@/utils/emoji';
import { mapGetters } from 'vuex';
import { getToken } from '@/utils/auth'; // 获取token，用于后端接口登录校验，根据公司的业务自行移除或替换就行
import { validImgUpload } from '@/utils/validate';
import lrz from 'lrz';
export default {
	data() {
		return {
			content: '',
			reply: '未找到',
			frequency: 0,
			warn: false,
			showEmoji: false,
			uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
			uploadVideoUrl: process.env.VUE_APP_BASE_API + '/common/upload-video-image', // 上传的视频服务器地址
			headers: {
				Authorization: 'Bearer ' + getToken(),
			},
			//0 文字,1 图片, 2 视频, 3 语音
			msgType: 0,
			useCompress: false,
			emojis: emoji,
			uploadVideoWidth: 0,
			uploadVideoHeight: 0,
		};
	},
	computed: {
		...mapGetters([
			'selectedChat',
			'selectId',
			// 'emojis',
		]),
	},
	watch: {
		// 在选择其它对话的时候 聚焦输入框

		selectId() {
			setTimeout(() => {
				this.$refs.text.focus();
			}, 0);
		},
		// 当输入框中的值为空时 弹出提示  并在一秒后消失
		content() {
			if (this.content === '') {
				if (this.frequency === 0) {
					this.warn = true;
					this.frequency++;
					setTimeout(() => {
						this.warn = false;
					}, 1000);
				}
			}
		},
	},
	// 在进入的时候 聚焦输入框
	mounted() {
		this.$refs.text.focus();
	},

	methods: {
		imgUpSuccessVideo(res) {
			this.content = res.data.url + '?poster=' + res.data.videoUrl + '&width=' + this.uploadVideoWidth + '&height=' + this.uploadVideoHeight;
			this.send(3);
		},
		beforeUploadVideo(file) {
			let videoUrl = URL.createObjectURL(file);
			let videoObj = document.createElement('video');
			let that = this;
			videoObj.onloadedmetadata = () => {
				URL.revokeObjectURL(videoUrl);
				that.uploadVideoWidth = videoObj.videoWidth;
				that.uploadVideoHeight = videoObj.videoHeight;
				// 执行上传的方法，获取外网路径，上传进度等
			};
			videoObj.src = videoUrl;
			videoObj.load();
		},
		beforeUpload(file) {
			this.isFirstMount = false;
			if (this.useCompress) {
				// 图片压缩
				return new Promise((resolve, reject) => {
					lrz(file, { width: 1920 })
						.then((rst) => {
							file = rst.file;
						})
						.always(() => {
							if (validImgUpload(file, this.size)) {
								this.isUploading = true;
								resolve();
							} else {
								reject(new Error());
							}
						});
				});
			} else {
				if (validImgUpload(file, this.size)) {
					this.isUploading = true;
					return true;
				} else {
					return false;
				}
			}
		},
		imgUpSuccess(res) {
			this.content = res.data.url;
			this.send(1);
		},
		onKeyup(e) {
			if (e.keyCode === 13) {
				this.send();
			}
		},
		// 点击发送按钮发送信息
		send(msgType) {
			if (!this.content) {
				this.warn = true;
				this.content = '';
				this.warn = false;
				this.msgError('请输入聊天内容');
				return;
			}
			if (!this.selectId) {
				this.msgError('请选择会话');
				return;
			}
			var msg = {
				content: this.content,
				selectId: this.selectId,
				msgType: typeof msgType === 'number' ? msgType : 0,
			};
			this.$emit('send', msg);
			this.showEmoji = false;
			this.content = '';
		},
	},
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload-list__item-name {
	display: none;
}
::v-deep .el-upload-list__item.is-success .el-upload-list__item-status-label {
	display: none;
}
.text {
	position: relative;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding-bottom: 12px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
ul,
li {
	list-style: none;
}
.text .emoji {
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	padding: 0 15px;
	box-sizing: border-box;
	color: #7c7c7c;
	display: flex;
	align-items: center;
}

.text .emoji .icon-look {
	cursor: pointer;
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url('~@/assets/images/bq.png');
	background-size: 100% 100%;
}
.text .emoji .icon-img {
	cursor: pointer;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background: url('~@/assets/images/img.png');
	background-size: 100% 100%;
	margin-top: 14px;
}
.text .emoji .icon-video {
	cursor: pointer;
	display: inline-block;
	width: 26px;
	height: 26px;
	margin-left: 10px;
	background: url('~@/assets/images/video.png');
	background-size: 100% 100%;
	margin-top: 14px;
}
.text .emoji .icon-look:hover {
	color: #1aad19;
}

.text .emoji .emojiBox {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	top: -210px;
	left: -100px;
	width: 340px;
	height: 200px;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	box-shadow: 0 1px 2px 1px #d1d1d1;
	overflow-y: auto;
	> li {
		padding: 0;
		margin: 0;
	}
	span {
		font-size: 18px;
		padding: 7px;
		cursor: pointer;
	}
}

.text .emoji .emojiBox.showbox-enter-active,
.text .emoji .emojiBox.showbox-leave-active {
	transition: all 0.5s;
}

.text .emoji .emojiBox.showbox-enter,
.text .emoji .emojiBox.showbox-leave-active {
	opacity: 0;
}

.text textarea {
	height: 50px;
	width: 100%;
	border: none;
	outline: none;
	resize: none;
	font-size: 14px;
	padding: 0 15px;
}

.text .send {
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	color: #333333;
	width: 108px;
	height: 37px;
	line-height: 37px;
	background: rgba(229, 229, 229, 0.29);
	border-radius: 8px;
}

.text .warn {
	position: absolute;
	bottom: 50px;
	right: 10px;
	width: 110px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	text-align: center;
	border: 1px solid #bdbdbd;
	border-radius: 4px;
	box-shadow: 0 1px 5px 1px #bdbdbd;
}
.send {
	cursor: pointer;
}
.text .warn.appear-enter-active,
.text .warn.appear-leave-active {
	transition: all 1s;
}

.text .warn.appear-enter,
.text .warn.appear-leave-active {
	opacity: 0;
}

.text .warn:before {
	content: ' ';
	position: absolute;
	top: 100%;
	right: 20px;
	border: 7px solid transparent;
	border-top-color: #fff;
	filter: drop-shadow(1px 3px 2px #bdbdbd);
}
</style>
